import * as React from 'react';
import { Form, Input, Modal, Select, message, Radio } from 'antd';
import request from '@/http';

const { Option } = Select;

interface UserEditObject {
  isModalVisible: boolean;
  id?: number;
  teamName?: string;
  isGraduation?: number;
  groupId?: any;
}

//项目管理 新增小组
const AddGroup = (props: { editObject: UserEditObject; onClose: any }) => {
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async () => {
    const data = await formObject.validateFields();
    console.log(data);

    //序列化
    var dataStr = '';
    var ds = {
      ...data,
    };
    for (var n in ds) {
      if (dataStr != '') dataStr += '&';
      dataStr += encodeURIComponent(n) + '=' + encodeURIComponent(ds[n]);
    }

    const result: any = await request.post(
      '/api/admin/group/InsertTeam',
      dataStr,
    );
    console.log(result);
    if (result.code == 200) {
      setTimeout(() => {
        message.success('添加成功');
        if (onClose) {
          onClose();
        }
      }, 500);

      setIsModalVisible(false);
    }
  };

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
    if (editObject.id !== null) {
      formObject.setFieldsValue({
        teamName: editObject.teamName,
        isGraduation: editObject.isGraduation,
      });
    }
  }, [editObject]);

  //单选框的默认值
  const [value, setValue] = React.useState(0);

  return (
    <>
      <Modal
        width={800}
        className="modal"
        title={'新增分组'}
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
        >
          <Form.Item label="小组名称" name="teamName">
            <Input
              style={{ display: 'block' }}
              className="addGroupInput"
              placeholder="请输入..."
            />
          </Form.Item>
          <Form.Item label="是否结业" name="isGraduation">
            <Radio.Group value={value}>
              <Radio value={1}>已结业</Radio>
              <Radio value={0}>未结业</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export { AddGroup, UserEditObject };
